var app = new Vue({
    el:"#app",
    delimiters: ['[[', ']]'], // 修改vue模板符号，防止与django冲突
    data:{
        // 页面中需要使用到的数据，键值对
        activities:[],
        page: 1, // 当前页数
        page_size: 16, // 每页数量
        count: 0,
        user_id: sessionStorage.user_id || localStorage.user_id,
        token: sessionStorage.token || localStorage.token


    },
    computed:{
        // 需要通过计算得到的数据，键值对 ，键是名称，值是匿名函数
        total_page: function(){  // 总页数
            return Math.ceil(this.count/this.page_size);
        },
        next: function(){  // 下一页
            if (this.page >= this.total_page) {
                return 0;
            } else {
                return this.page + 1;
            }
        },
        previous: function(){  // 上一页
            if (this.page <= 0 ) {
                return 0;
            } else {
                return this.page - 1;
            }
        },
        page_nums: function(){  // 页码
            // 分页页数显示计算
            // 1.如果总页数<=5
            // 2.如果当前页是前3页
            // 3.如果当前页是后3页,
            // 4.既不是前3页，也不是后3页
            var nums = [];
            if (this.total_page <= 5) {
                for (var i=1; i<=this.total_page; i++){
                    nums.push(i);
                }
            } else if (this.page <= 3) {
                nums = [1, 2, 3, 4, 5];
            } else if (this.total_page - this.page <= 2) {
                for (var i=this.total_page; i>this.total_page-5; i--) {
                    nums.push(i);
                }
            } else {
                for (var i=this.page-2; i<this.page+3; i++){
                    nums.push(i);
                }
            }
            return nums;
        }
    },
    mounted:function () {
        // 一加载就需要做的，直接是代码
        if(this.user_id && this.token){
            axios.get(host+"/activities?page="+this.page+"&page_size="+this.page_size,{
                    // 向后端传递JWT token的方法
                    headers: {
                        'Authorization': 'JWT ' + this.token
                    },
                    responseType: 'json',
                    withCredentials: true
                })
            .then(response=>{
                this.activities=response.data.results;
                this.count=response.data.count
            })
            .catch(erro =>{
                alert("出错了")
            })
        }else{
            axios.get(host+"/activities?page="+this.page+"&page_size="+this.page_size)
            .then(response=>{
                this.activities=response.data.results;
                this.count=response.data.count
            })
            .catch(erro =>{
                alert("出错了")
            })
        }

    },
    methods:{
        // 需要用到的函数，键值对 ，键是名称，值是匿名函数
        // 获取分页信息
        get_pagination_info : function(page){
            axios.get(host+"/activities?page="+page+"&page_size="+this.page_size)
                .then(response=>{
                    this.activities=response.data.results
                })
                .catch(erro =>{
                    alert('出错了')
                })
        },
        // 点击页数
        on_page: function(num){
            if (num != this.page){
                this.page = num;
                this.get_pagination_info(this.page)
            }
        },
        // 点击报名
        on_apply: function(activity_id){
            if(this.user_id && this.token){
                axios.post(host+"/activity",{
                activity_id: activity_id
                },{
                    // 向后端传递JWT token的方法
                    headers: {
                        'Authorization': 'JWT ' + this.token
                    },
                    responseType: 'json',
                    withCredentials: true
                })
                .then(response=>{
                    alert('报名成功')

                    location.reload()
                })
                .catch(erro =>{

                    alert('你已报名')

                    // console.log(erro)
                })
            }else{
                location.href = './login.html';
            }

        }
    }
})